<!-- 业务流程进展点击模块弹框插件，并调用可滚动步骤条插件 -->
<template>
	<div class="hello">
		<div v-for="(item, index) of dataList" :class="['classify', (index + 1) % 3 != 0 ? 'demo' : 'demo_']"
			v-if="(index + 1) % 3 != 0 || item.isok" :key="index">
			<div :class="[index == present ? 'demo_content' : 'demo_contents']"
				v-if="(index + 1) % 3 != 0 && item.name != null" @click="changes(index)">
				<!-- 箭头 -->
				<div class="arrows" v-if="index == present">
					<span class="arrows_left"></span>
					<span class="arrows_right"></span>
					<span class="arrows_bottom"></span>
				</div>
				<img src="./aqch.png" alt="" class="imgs">
				<span class="text">
					{{ item.name }}({{ item.number }})
				</span>
			</div>
			<div class="contents" v-if="item.isok">
				<div class="step" v-for="(item,index) of stepList">
					<span class="stepName">脚手架</span>
					<StepList :stepList="item.datas" :unfinishedColor="unfinishedColor"
						:accomplishColor="accomplishColor" :active="item.number"></StepList>
				</div>
			</div>
		</div>
		<!-- <div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo_"></div> -->
	</div>
</template>

<script>
	import StepList from './Step.vue'
	export default {
		props: ["list", "listChanges"],
		data() {
			return {
				present: "null", //判断当前点击那个按钮
				active: 1, //进度条当前进度
				number_module: "null", //业务流程点击的是哪个模块
				// 步骤条属性
				stepList: [{
					datas: ['开始', '检查', '整改', '复检', '完成'],
					number: 1
				}, {
					datas: ['开始', '检查', '整改', '复检', '完成'],
					number: 2
				}, {
					datas: ['开始', '检查', '整改', '复检', '完成'],
					number: 3
				}, {
					datas: ['开始', '检查', '整改', '复检', '完成'],
					number: 5
				}],
				unfinishedColor: "#E49970", //进度条未执行完的颜色
				accomplishColor: "#69C5A4", //进度条完成的颜色
				dataList: this.list
			};
		},
		components: {
			StepList
		},
		methods: {
			// 点击模块事件
			changes(e) {
				if (e != this.number_module) {
					this.number_module = e;
					var num = 0;
					if ((e + 2) % 3 != 0) {
						num = e + 2;
					} else {
						num = e + 1;
					}
					this.present = e;
					this.dataList.forEach((e) => {
						e.isok = false;
					});
					this.dataList[num].isok = true;
				} else {
					this.present = "null";
					this.number_module = "null";
					this.dataList.forEach((e) => {
						e.isok = false;
					});
				}

			},
			// 处理数据达到逻辑功能
			changeDatas() {
				// 处理奇偶数据对页面的美观度

				if (this.dataList.length % 2 != 0) {
					if (this.dataList[this.dataList.length - 1].index != this.dataList.length - 1) {
						this.dataList.push({
							index: 0,
						});
					}
				}
				var endok = true;
				// 给数据添加空对象,实现循环效果
				for (var i = 0; i < this.dataList.length; i++) {
					if ((i + 1) % 3 == 0) {
						if (this.dataList[i].index != i) {
							let obj = {
								index: i,
							};
							this.dataList.splice(i, 0, obj);
						} else {
							endok = false
						}
					}
				}
				if (endok) {
					this.dataList.push({
						index: this.dataList.length
					})
				}

				this.dataList.forEach((e) => {
					e.isok = false;
				});
			},
			widths(index) {
				return index * 1.86 + 'rem';
			}
		},
		created() {
			this.changeDatas();
		},
		watch: {
			listChanges(oldValue, newValue) {
				this.changeDatas();
			},
		},
	};
</script>

<style scoped>
	.hello {
		width: 98%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.demo {
		width: 47%;
		height: 1.5rem;
	}

	.demo_content {
		width: 100%;
		height: 1.5rem;
		background-color: #1fa0fc;
		color: #fff;
		border-radius: 5px;
		margin-bottom: 0.4rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
	}

	.demo_contents {
		width: 100%;
		height: 1.5rem;
		background-color: #fff;
		color: #5c5c5c;
		border-radius: 5px;
		margin-bottom: 0.4rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
	}

	.arrows {
		width: 0.4rem;
		height: 0.4rem;
		display: flex;
		position: absolute;
		left: 50%;
		bottom: -0.56rem;
	}

	.arrows span {
		display: block;
		width: 1px;
		height: 0.4rem;
	}

	.arrows_left {
		background-color: #9bcbe1;
		transform: rotate(45deg) translateX(-0.165rem);
	}

	.arrows_right {
		background-color: #9bcbe1;
		transform: rotate(-45deg) translateX(0.165rem);
	}

	.arrows_bottom {
		background-color: #fff;
		height: 0.5rem !important;
		width: 2px !important;
		transform: rotate(90deg) translateY(0.05rem);
	}

	.demo_ {
		width: 100%;
		height: 8rem;
		/* 	background-color: #fff;
		border-radius: 5px;
		border-top: 1px solid #9BCBE1; */
	}

	.contents {
		max-width: 100%;
		height: 8rem;
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
		background-color: #fff;
		border-radius: 5px;
		border-top: 1px solid #9bcbe1;
	}

	.contents::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.classify {
		margin-bottom: 0.4rem;
	}

	.step {
		width: 95%;
		margin: auto;
		padding-top: .15rem;
	}

	.stepName {
		display: flex;
		align-items: center;
		height: .8rem;
		font-size: .35rem;
		color: #292929;
	}

	.imgs {
		display: block;
		width: 1rem;
		height: 1rem;
		margin: 0 .4rem;
	}

	.text {
		display: block;
		font-size: .35rem;
		flex: 1;
	}
</style>
